<style rel="stylesheet/scss" lang="scss" scoped>
@import "../../../styles/prod.scss";
</style>
<template>
<el-tabs style="margin:20px;" >
    
    <el-form ref="form" :model="form" label-width="80px">
     <custom-card title="基本信息" class="mt-30">
      <el-row>
        <el-col :span="24">
          <el-row>
            <el-col :span="8">
                <div class="grid-content bg-purple">
                  <el-form-item label="客户名称:">
                        <span>    
                           BOSCH
                        </span>
                  </el-form-item>
                </div>
            </el-col>
            <el-col :span="8">
                <div class="grid-content bg-purple-light">
                    <el-form-item label="产品类别:">
                        <span>
                            AC电链锯
                        </span>
                    </el-form-item>
                </div>
            </el-col>
            <el-col :span="8">
                <div class="grid-content bg-purple">
                    <el-form-item label="机型码:">
                        <span>
                            A022009
                        </span>
                    </el-form-item>
                </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
                <div class="grid-content bg-purple">
                  <el-form-item label="完成日期:">
                        <span>
                            2018-10-20
                        </span>
                  </el-form-item>
                </div>
            </el-col>
            <el-col :span="8">
                <div class="grid-content bg-purple-light">
                    <el-form-item label="大样数量:">
                        <span>10</span>
                    </el-form-item>
                </div>
            </el-col>
            <el-col :span="8">
                <div class="grid-content bg-purple">
                    <el-form-item label="包装师:">
                        <span>
                            张三
                        </span>
                    </el-form-item>
                </div>
            </el-col>
          </el-row>
            <el-row>
             <el-col :span="24">
                 <div class="grid-content bg-purple-dark">
                    <el-form-item label="包装方式:">
                        <span>
                          彩盒包装，采用自成形方式，使用YAT标准材质，内衬用瓦楞纸隔板   
                        </span>
                    </el-form-item>
                </div>
             </el-col>
          </el-row>
        </el-col>
      </el-row>
          <custom-card title="本体" class="mt-30">
            <el-row>
                <el-col :span="24">
                <el-row>
                    <el-col :span="24">
                        <div class="grid-content bg-purple-dark">
                            <el-form-item label="规格描述:">
                                <span>
                                    材质: 塑料件:全新尼龙PA6-GF30，颜色: 172C+黑色，额定电压/频率: 220/50HZ，额定功率: 2200W
                                </span>
                            </el-form-item>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <div class="grid-content bg-purple-dark">
                            <el-form-item label="本体数量:">
                                <span>
                                    1
                                </span>
                            </el-form-item>
                        </div>
                    </el-col>
                </el-row>
                </el-col>
            </el-row>
          </custom-card>
           <custom-card title="配件" class="mt-30">
            <el-row>
                <el-col :span="24">
                <el-row>
                    <el-col :span="24">
                        <div class="grid-content bg-purple-dark">
                            <el-form-item label="规格描述:">
                                <span>
                                    导板×1、链条×1
                                </span>
                            </el-form-item>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <div class="grid-content bg-purple-dark">
                            <el-form-item label="本体数量:">
                                <span>
                                    2
                                </span>
                            </el-form-item>
                        </div>
                    </el-col>
                </el-row>
                </el-col>
            </el-row>
         </custom-card>
         <el-row>
             <el-col :span="24">
                 <div class="grid-content bg-purple-dark">
                    <el-form-item label="备注:">
                       <span>
                           导板×1、链条×1,主机×1，说明书×1，合格证×1，维修证×1
                       </span>
                    </el-form-item>
                </div>
             </el-col>
          </el-row>
     </custom-card>
   <custom-card title="附件" class="mt-30">
            <el-row>
                <el-col :span="24">
                <el-form-item label="材质客户:">
                    <el-row>
                        <el-col :span="24">
                            <div class="grid-content bg-purple-dark">
                            <span>
                                文件1.pdf
                            </span>
                            </div>
                        </el-col>
                    </el-row>
                </el-form-item>
                <el-form-item label="客户跌落:">
                    <el-row>
                        <el-col :span="24">
                            <div class="grid-content bg-purple-dark">
                             <span>
                                文件2.pdf
                            </span>
                            </div>
                        </el-col>
                    </el-row>
                 </el-form-item>
                 <el-form-item label="其他附件:">
                    <el-row>   
                        <el-col :span="24"> 
                            <div class="grid-content bg-purple-dark">
                             <span>
                                文件3.pdf
                            </span>
                            </div>
                        </el-col>
                    </el-row>
                </el-form-item>
                </el-col>
            </el-row>
   </custom-card>
        <custom-card title="包装设计" class="mt-30">
            <el-row>
                <el-collapse v-model="activeName">      
                    <el-collapse-item title="纸箱" name="1">
                          <custom-card title="种类选择(多选)" class="mt-30">
                            <el-row>
                                 <el-checkbox-group v-model="form.type">
                                    <el-col :span="12">
                                        <div class="grid-content bg-purple" style='display:flex;
                                        justify-content: space-around;line-height:38px;'>
                                            <el-checkbox label="彩盒" name="type"></el-checkbox>
                                            <el-checkbox label="外箱" name="type"></el-checkbox>
                                            <el-checkbox label="纸套" name="type"></el-checkbox>
                                            <el-checkbox label="展示盒" name="type"></el-checkbox>
                                            <el-checkbox label="其他" name="type"></el-checkbox>
                                        </div>
                                    </el-col>
                                    <el-col :span="6">
                                        <div class="grid-content bg-purple">
                                            <el-input  placeholder="请输入内容"></el-input>  
                                        </div>
                                    </el-col>
                                  </el-checkbox-group>
                            </el-row>
                          </custom-card>
                           <custom-card title="形成方式" class="mt-30">
                            <el-row>
                                 <el-checkbox-group v-model="form.type">
                                    <el-col :span="12">
                                        <div class="grid-content bg-purple" style='display:flex;
                                        justify-content: space-around;line-height:38px;'>
                                            <el-checkbox label="自成型" name="type"></el-checkbox>
                                            <el-checkbox label="钉接" name="type"></el-checkbox>
                                            <el-checkbox label="粘接" name="type"></el-checkbox>
                                            <el-checkbox label="胶带粘接" name="type"></el-checkbox>
                                            <el-checkbox label="其他" name="type"></el-checkbox>
                                        </div>
                                    </el-col>
                                    <el-col :span="6">
                                        <div class="grid-content bg-purple">
                                            <el-input  placeholder="请输入内容"></el-input>  
                                        </div>
                                    </el-col>
                                  </el-checkbox-group>
                            </el-row>
                           </custom-card>
                           <custom-card title="材料" class="mt-30">
                            <el-row>
                                 <el-checkbox-group v-model="form.type">
                                    <el-col :span="12">
                                        <div class="grid-content bg-purple" style='display:flex;
                                        justify-content: space-around;line-height:38px;'>
                                            <el-checkbox label="YAT标准材质" name="type"></el-checkbox>
                                            <el-checkbox label="客户标准材质" name="type"></el-checkbox>
                                        </div>
                                    </el-col>
                                    <el-col :span="6">
                                        <div class="grid-content bg-purple">
                                            <el-input  placeholder="请输入内容"></el-input>  
                                        </div>
                                    </el-col>
                                  </el-checkbox-group>
                            </el-row>
                           </custom-card>
                          <custom-card title="封口方式" class="mt-30">
                            <el-row>
                                 <el-checkbox-group v-model="form.type">
                                    <el-col :span="12">
                                        <div class="grid-content bg-purple" style='display:flex;
                                        justify-content: space-around;line-height:38px;'>
                                            <el-checkbox label="胶带" name="type"></el-checkbox>
                                            <el-checkbox label="热熔胶" name="type"></el-checkbox>
                                            <el-checkbox label="透明标贴" name="type"></el-checkbox>
                                            <el-checkbox label="机用打包带" name="type"></el-checkbox>
                                        </div>
                                    </el-col>
                                    <el-col :span="6">
                                        <div class="grid-content bg-purple">
                                            <el-input  placeholder="请输入内容"></el-input>  
                                        </div>
                                    </el-col>
                                  </el-checkbox-group>
                            </el-row>
                          </custom-card>

                    </el-collapse-item>
                    <el-collapse-item title="内衣" name="2">
                        <custom-card title="种类选择" class="mt-30">
                            <el-row>
                                 <el-checkbox-group v-model="form.type">
                                    <el-col :span="18">
                                        <div class="grid-content bg-purple" style='display:flex;
                                        justify-content: space-around;line-height:38px;'>
                                            <el-checkbox label="瓦楞纸隔板" name="type"></el-checkbox>
                                            <el-checkbox label="蜂窝纸隔板" name="type"></el-checkbox>
                                            <el-checkbox label="纸浆模" name="type"></el-checkbox>
                                            <el-checkbox label="泡沫(EPS)" name="type"></el-checkbox>
                                            <el-checkbox label="珍珠棉(EPE)" name="type"></el-checkbox>
                                            <el-checkbox label="塑料托(PP/PVC/PET)" name="type"></el-checkbox>
                                        </div>
                                    </el-col>
                                  </el-checkbox-group>
                            </el-row>
                        </custom-card>
                    </el-collapse-item>
                    <el-collapse-item title="销售包装" name="3">
                            <custom-card title="泡壳" class="mt-30">
                            <el-row>
                                 <el-checkbox-group v-model="form.type">
                                    <el-col :span="24">
                                             <el-form-item label="种类选择" style='width:100%; border-bottom:1px solid #ccc;color:#ccc;'></el-form-item>
                                    </el-col>
                                    <el-col :span="18">
                                        <div class="grid-content bg-purple" style='display:flex;
                                        justify-content: space-around;line-height:38px;'>
                                            <el-checkbox label="上泡壳+彩卡" name="type"></el-checkbox>
                                            <el-checkbox label="上下泡壳" name="type"></el-checkbox>
                                            <el-checkbox label="彩卡" name="type"></el-checkbox>
                                            <el-checkbox label="对折泡壳" name="type"></el-checkbox>
                                            <el-checkbox label="三折泡壳" name="type"></el-checkbox>
                                        </div>
                                    </el-col>
                                  </el-checkbox-group>
                                  <el-checkbox-group v-model="form.type">
                                    <el-col :span="24">
                                             <el-form-item label="打孔" style='width:100%; border-bottom:1px solid #ccc;'></el-form-item>
                                    </el-col>
                                    <el-col :span="11">
                                        <div class="grid-content bg-purple" style='display:flex;
                                        justify-content: space-around;line-height:38px;'>
                                            <el-checkbox label="YAT蝴蝶孔" name="type"></el-checkbox>
                                            <el-checkbox label="客户标准蝴蝶孔" name="type"></el-checkbox>
                                            <el-checkbox label="其他" name="type"></el-checkbox>
                                        </div>
                                    </el-col>
                                     <el-col :span="6">
                                        <div class="grid-content bg-purple">
                                            <el-input  placeholder="请输入内容"></el-input>  
                                        </div>
                                    </el-col>
                                  </el-checkbox-group>
                                   <el-checkbox-group v-model="form.type">
                                    <el-col :span="24">
                                             <el-form-item label="封口方式" style='width:100%; border-bottom:1px solid #ccc;'></el-form-item>
                                    </el-col>
                                    <el-col :span="9">
                                        <div class="grid-content bg-purple" style='display:flex;
                                        justify-content: space-around;line-height:38px;'>
                                            <el-checkbox label="热封" name="type"></el-checkbox>
                                            <el-checkbox label="钉封" name="type"></el-checkbox>
                                            <el-checkbox label="其他" name="type"></el-checkbox>
                                        </div>
                                    </el-col>
                                     <el-col :span="6">
                                        <div class="grid-content bg-purple">
                                            <el-input  placeholder="请输入内容"></el-input>  
                                        </div>
                                    </el-col>
                                  </el-checkbox-group>
                            </el-row>
                            </custom-card>
                            <custom-card title="PE袋" class="mt-30">
                            <el-row>
                                 <el-checkbox-group v-model="form.type">
                                    <el-col :span="24">
                                             <el-form-item label="种类选择" style='width:100%; border-bottom:1px solid #ccc;color:#ccc;'></el-form-item>
                                    </el-col>
                                    <el-col :span="7">
                                        <div class="grid-content bg-purple" style='display:flex;
                                        justify-content: space-around;line-height:38px;'>
                                            <el-checkbox label="有吊卡" name="type"></el-checkbox>
                                            <el-checkbox label="无吊卡" name="type"></el-checkbox>
                                        </div>
                                    </el-col>
                                  </el-checkbox-group>
                                  <el-checkbox-group v-model="form.type">
                                    <el-col :span="24">
                                             <el-form-item label="打孔" style='width:100%; border-bottom:1px solid #ccc;'></el-form-item>
                                    </el-col>
                                    <el-col :span="12">
                                        <div class="grid-content bg-purple" style='display:flex;
                                        justify-content: space-around;line-height:38px;'>
                                            <el-checkbox label="YAT蝴蝶孔" name="type"></el-checkbox>
                                            <el-checkbox label="客户标准蝴蝶孔" name="type"></el-checkbox>
                                            <el-checkbox label="其他" name="type"></el-checkbox>
                                        </div>
                                    </el-col>
                                    <el-col :span="6">
                                        <div class="grid-content bg-purple">
                                            <el-input  placeholder="请输入内容"></el-input>  
                                        </div>
                                    </el-col>
                                  </el-checkbox-group>
                                   <el-checkbox-group v-model="form.type">
                                    <el-col :span="24">
                                             <el-form-item label="封口方式" style='width:100%; border-bottom:1px solid #ccc;'></el-form-item>
                                    </el-col>
                                    <el-col :span="11">
                                        <div class="grid-content bg-purple" style='display:flex;
                                        justify-content: space-around;line-height:38px;'>
                                            <el-checkbox label="胶热熔胶" name="type"></el-checkbox>
                                            <el-checkbox label="钉封" name="type"></el-checkbox>
                                            <el-checkbox label="其他" name="type"></el-checkbox>
                                        </div>
                                    </el-col>
                                    <el-col :span="6">
                                        <div class="grid-content bg-purple">
                                            <el-input  placeholder="请输入内容"></el-input>  
                                        </div>
                                    </el-col>
                                  </el-checkbox-group>
                                   <el-checkbox-group v-model="form.type">
                                    <el-col :span="24">
                                             <el-form-item label="厚度" style='width:100%; border-bottom:1px solid #ccc;'></el-form-item>
                                    </el-col>
                                    <el-col :span="8">
                                        <div class="grid-content bg-purple" style='display:flex;
                                        justify-content: space-around;line-height:38px;'>
                                            <el-checkbox label="上泡壳+彩卡" name="type"></el-checkbox>
                                            <el-checkbox label="上下泡壳" name="type"></el-checkbox>
                                        </div>
                                    </el-col>
                                  </el-checkbox-group>
                            </el-row>
                        </custom-card>
                    </el-collapse-item>
                </el-collapse>
            </el-row>
        </custom-card>

<!-- 设计文稿 -->
<custom-card title="设计文稿" class="mt-30">
            <el-row>
                <el-col :span="24">
                    <el-row>
                        <el-col :span="24">
                            <el-container>
                                <el-aside width="200px">
                                      <!-- 点击上传文件 -->
                                    <el-upload
                                        class="upload-demo"
                                        action="https://jsonplaceholder.typicode.com/posts/" 
                                        list-type="picture">
                                        <el-button size="small" >
                                            <i class='el-icon-upload2'></i>
                                            <span>
                                            点击上传  
                                            </span>
                                        </el-button>
                                    </el-upload> 
                                </el-aside>
                                <el-main>
                                <!-- 拖拽上传文件 -->
                                <el-upload 
                                    style="margin-left:100px; "
                                    class="upload-demo"
                                    drag
                                    action="https://jsonplaceholder.typicode.com/posts/"
                                    multiple>
                                    <i class="el-icon-upload"></i>
                                    <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                                    <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
                                </el-upload>
                                </el-main>
                            </el-container>
                        </el-col>
                    </el-row>
                </el-col>
            </el-row>
        </custom-card>
         <custom-card title="" class="mt-30">
            <el-row>
               <el-col :span="6" style='float:right'>
                    <div class="grid-content bg-purple">
                        <el-button>取消</el-button>
                        <el-button type="primary">保存草稿</el-button>
                        <el-button type="danger">提交</el-button>
                    </div>
                </el-col>
            </el-row>
         </custom-card>   
</el-form>
</el-tabs>
</template>



<script>
import {
  mapGetters
} from 'vuex';
import CustomCard from '@/components/CustomCard/index';
export default {
  name: 'user',
  components: {
    CustomCard
    // 'depart-selector': () =>
    //   import ('./components/departSelector')
  },
  data() {
    return {
      fileList2: [{ name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100' }, { name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100' }],
      form: {
        name: '',
        type: []
      },
      activeName: '',
      activeNames: ['1'],
      optionsWithDisabled: [{
        value: 'zhinan',
        label: '指南',
        disabled: true,
        children: [{
          value: 'shejiyuanze',
          label: '设计原则',
          children: [{
            value: 'yizhi',
            label: '一致'
          }, {
            value: 'fankui',
            label: '反馈'
          }, {
            value: 'xiaolv',
            label: '效率'
          }, {
            value: 'kekong',
            label: '可控'
          }]
        }, {
          value: 'daohang',
          label: '导航',
          children: [{
            value: 'cexiangdaohang',
            label: '侧向导航'
          }, {
            value: 'dingbudaohang',
            label: '顶部导航'
          }]
        }]
      }, {
        value: 'zujian',
        label: '组件',
        children: [{
          value: 'basic',
          label: 'Basic',
          children: [{
            value: 'layout',
            label: 'Layout 布局'
          }, {
            value: 'color',
            label: 'Color 色彩'
          }, {
            value: 'typography',
            label: 'Typography 字体'
          }, {
            value: 'icon',
            label: 'Icon 图标'
          }, {
            value: 'button',
            label: 'Button 按钮'
          }]
        }, {
          value: 'form',
          label: 'Form',
          children: [{
            value: 'radio',
            label: 'Radio 单选框'
          }, {
            value: 'checkbox',
            label: 'Checkbox 多选框'
          }, {
            value: 'input',
            label: 'Input 输入框'
          }, {
            value: 'input-number',
            label: 'InputNumber 计数器'
          }, {
            value: 'select',
            label: 'Select 选择器'
          }, {
            value: 'cascader',
            label: 'Cascader 级联选择器'
          }, {
            value: 'switch',
            label: 'Switch 开关'
          }, {
            value: 'slider',
            label: 'Slider 滑块'
          }, {
            value: 'time-picker',
            label: 'TimePicker 时间选择器'
          }, {
            value: 'date-picker',
            label: 'DatePicker 日期选择器'
          }, {
            value: 'datetime-picker',
            label: 'DateTimePicker 日期时间选择器'
          }, {
            value: 'upload',
            label: 'Upload 上传'
          }, {
            value: 'rate',
            label: 'Rate 评分'
          }, {
            value: 'form',
            label: 'Form 表单'
          }]
        }, {
          value: 'data',
          label: 'Data',
          children: [{
            value: 'table',
            label: 'Table 表格'
          }, {
            value: 'tag',
            label: 'Tag 标签'
          }, {
            value: 'progress',
            label: 'Progress 进度条'
          }, {
            value: 'tree',
            label: 'Tree 树形控件'
          }, {
            value: 'pagination',
            label: 'Pagination 分页'
          }, {
            value: 'badge',
            label: 'Badge 标记'
          }]
        }, {
          value: 'notice',
          label: 'Notice',
          children: [{
            value: 'alert',
            label: 'Alert 警告'
          }, {
            value: 'loading',
            label: 'Loading 加载'
          }, {
            value: 'message',
            label: 'Message 消息提示'
          }, {
            value: 'message-box',
            label: 'MessageBox 弹框'
          }, {
            value: 'notification',
            label: 'Notification 通知'
          }]
        }, {
          value: 'navigation',
          label: 'Navigation',
          children: [{
            value: 'menu',
            label: 'NavMenu 导航菜单'
          }, {
            value: 'tabs',
            label: 'Tabs 标签页'
          }, {
            value: 'breadcrumb',
            label: 'Breadcrumb 面包屑'
          }, {
            value: 'dropdown',
            label: 'Dropdown 下拉菜单'
          }, {
            value: 'steps',
            label: 'Steps 步骤条'
          }]
        }, {
          value: 'others',
          label: 'Others',
          children: [{
            value: 'dialog',
            label: 'Dialog 对话框'
          }, {
            value: 'tooltip',
            label: 'Tooltip 文字提示'
          }, {
            value: 'popover',
            label: 'Popover 弹出框'
          }, {
            value: 'card',
            label: 'Card 卡片'
          }, {
            value: 'carousel',
            label: 'Carousel 走马灯'
          }, {
            value: 'collapse',
            label: 'Collapse 折叠面板'
          }]
        }]
      }, {
        value: 'ziyuan',
        label: '资源',
        children: [{
          value: 'axure',
          label: 'Axure Components'
        }, {
          value: 'sketch',
          label: 'Sketch Templates'
        }, {
          value: 'jiaohu',
          label: '组件交互文档'
        }]
      }]
    }
  },
  created() {

  },
  computed: {
    ...mapGetters([
      'elements'
    ])
  },
  methods: {
    showMenu() {
      console.log('showMenu');
    },
    handleChange(val) {
      console.log(val);
    },


    // 图片上传开始
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    }
    // 图片上传结束
  }
}
</script>
